<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="description" content="The Page Description">
		<style type="text/css">@-ms-viewport{width: device-width;}</style>
		<title>Beetle - App Showcase Basic</title>
		<link rel="stylesheet" href="css/layers.min.css" media="screen">
		<link rel="stylesheet" href="css/font-awesome.min.css" media="screen"> 
		<link rel="stylesheet" href="style.css" media="screen">
		<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
		<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
		<![endif]-->
		<link rel="icon" href="favicon.ico">
		<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
		<link rel="apple-touch-icon" sizes="76x76" href="img/apple-touch-icon-76x76.png">
		<link rel="apple-touch-icon" sizes="120x120" href="img/apple-touch-icon-120x120.png">
		<link rel="apple-touch-icon" sizes="152x152" href="img/apple-touch-icon-152x152.png">			
	</head>

	<body class="page">

		<header role="banner" class="transparent light">
			<div class="row">
				<div class="nav-inner row-content buffer-left buffer-right even clear-after">
					<div id="brand">
						<h1 class="reset"><!--<img src="img/logo.png" alt="logo">--><a href="home-01.html">Beetle</a></h1>
					</div><!-- brand -->
					<a id="menu-toggle" href="#"><i class="fa fa-bars fa-lg"></i></a>
					<nav>
						<ul class="reset" role="navigation">
							<li class="menu-item">
								<a href="home-01.html">主页</a>
								<ul class="sub-menu">
									<li><a href="home-01.html">Generic Home Page</a></li>
									<li><a href="home-02.html">App Showcase</a></li>
									<li><a href="home-03.html">App Showcase Alternative</a></li>
								</ul>
							</li>
							<li class="menu-item">
								<a href="works-4-columns.html">工作</a>
								<ul class="sub-menu">
									<li><a href="works-4-columns.html">Four Columns Grid Style</a></li>
									<li><a href="works-3-columns.html">Three Columns Grid Style</a></li>
									<li><a href="works-4-columns-alternative.html">Four Columns Mosaic Style</a></li>
									<li><a href="works-3-columns-alternative.html">Three Columns Mosaic Style</a></li>
									<li><a href="works-4-columns-lightbox.html">Lightbox Gallery</a></li>
									<li><a href="single-work-post.html">Single Work Page</a></li>
								</ul>
							</li>
							<li class="menu-item">
								<a href="blog-4-columns-masonry.html">旅游相册</a>
								<ul class="sub-menu">
									<li><a href="blog-4-columns-masonry.html">天门山</a></li>
									<li><a href="blog-list-sidebar.html">凤凰古城</a></li>
									<li><a href="single-blog-post.html">武林元</a></li>
									<li><a href="single-blog-post-sidebar.html">十里画廊</a></li>
								</ul>
							</li>
							<li class="menu-item"><a href="resume.html">Resume</a></li>
							<li class="menu-item">
								<a href="#">Features</a>
								<ul class="sub-menu">
									<li><a href="search.html">Search Page</a></li>
									<li><a href="no-results.html">Search Page - No Results</a></li>
									<li><a href="page-not-found.html">404 - Page Not Found</a></li>
									<li>
										<a href="#">Sub Menu</a>
										<ul class="sub-menu">
											<li><a href="#">Sub Sub Menu 01</a></li>
											<li><a href="#">Sub Sub Menu 02</a></li>
											<li><a href="#">Sub Sub Menu 03</a></li>
										</ul>										
									</li>
								</ul>								
							</li>
							<li class="menu-item"><a href="contact.html">Contact</a></li>
						</ul>
					</nav>
				</div><!-- row-content -->	
			</div><!-- row -->	
		</header>

		<main role="main">
			<div id="intro-wrap">
				<div id="intro" class="preload" data-autoplay="5000" data-navigation="true" data-pagination="true" data-transition="fade">	
					<div class="intro-item" style="background-color: #70767C;">		
						<div class="intro-mockup-wrapper">		
							<div class="caption-mockup caption-right column six last-special">
								<h2>Pixel-perfect UI</h2>
								<p>Take care of your design and build awesome apps.
									<br>Designed by <a href="#rickwaalders">Rick Waalders</a></p>
								<a class="button white transparent" href="#">Read More</a>
							</div><!-- caption -->
							<div class="intro-mockup intro-left column six">
								<img src="http://placehold.it/780x1824/ddd/fff&text=Beetle%20image" alt="">
							</div><!-- intro-mockup -->							
						</div><!-- intro-mockup-wrapper -->
					</div>					
					<div class="intro-item" style="background-color: #70767C;">
						<div class="intro-mockup-wrapper">						
							<div class="caption-mockup">
								<h2>Minimal Design</h2>
								<p>Because we love simplicity</p>
							</div><!-- caption -->	
							<div class="photocaption">
								<h4>Shot by <a href="#noptar">Mani</a></h4>
							</div><!-- photocaption -->													
							<div class="intro-mockup">
								<img src="http://placehold.it/1193x937/ddd/fff&text=Beetle%20image" alt="">
							</div><!-- intro-mockup -->	
						</div><!-- intro-mockup-wrapper -->										
					</div>
					<div class="intro-item" style="background-color: #70767C;">
						<div class="intro-mockup-wrapper">
							<div class="caption-mockup caption-left column six">
								<h2>Love for people</h2>
								<p>A mobile-first approach to make better layouts.
								<br>Designed by <a href="#anwaltzzz">Alexander Zaytsev</a>.</p>
								<a class="button white transparent" href="#">Read More</a>
							</div><!-- caption -->												
							<div class="intro-mockup intro-right column six last">
								<img src="http://placehold.it/780x1824/ddd/fff&text=Beetle%20image" alt="">
							</div><!-- intro-mockup -->	
						</div><!-- intro-mockup-wrapper -->
					</div>	
					<div class="intro-item" style="background-color: #70767C;">
						<div class="intro-mockup-wrapper">						
							<div class="caption-mockup">
								<h2>Built for iPad</h2>
							</div><!-- caption -->	
							<div class="photocaption">
								<h4>Shot by <a href="#noptar">Mani</a></h4>
							</div><!-- photocaption -->													
							<div class="intro-mockup">
								<img src="http://placehold.it/1193x937/ddd/fff&text=Beetle%20image" alt="">
							</div><!-- intro-mockup -->	
						</div><!-- intro-mockup-wrapper -->										
					</div>
				</div><!-- intro -->
			</div><!-- intro-wrap -->

			<div id="main">

				<section class="row section call-to-action">
					<div class="row-content buffer even">
						<p>Have you fallen in love with Beetle?</p>
						<a class="button red" href="#">Buy it now!</a>
					</div>
				</section>

				<section class="row section">
					<div class="row-content buffer even clear-after">
						<div class="column four">
							<div class="small-icon red"><i class="icon icon-paperfly"></i></div>
							<div class="small-icon-text clear-after">
								<h4>Landing page</h4>
								<p class="text-xs">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
							</div>
						</div>
						<div class="column four">
							<div class="small-icon red"><i class="icon icon-diamond"></i></div>
							<div class="small-icon-text clear-after">
								<h4>Portfolio</h4>
								<p class="text-xs">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
							</div>
						</div>
						<div class="column four last">
							<div class="small-icon red"><i class="icon icon-crown"></i></div>
							<div class="small-icon-text clear-after">
								<h4>Resume</h4>
								<p class="text-xs">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
							</div>
						</div>
						<div class="column four">
							<div class="small-icon red"><i class="icon icon-tablet"></i></div>
							<div class="small-icon-text clear-after">
								<h4>Responsive</h4>
								<p class="text-xs">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
							</div>
						</div>
						<div class="column four">
							<div class="small-icon red"><i class="icon icon-megaphone"></i></div>
							<div class="small-icon-text clear-after">
								<h4>Blog</h4>
								<p class="text-xs">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
							</div>
						</div>
						<div class="column four last">
							<div class="small-icon red"><i class="icon icon-multiview"></i></div>
							<div class="small-icon-text clear-after">
								<h4>Layer CSS</h4>
								<p class="text-xs">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
							</div>
						</div>
					</div>
				</section>	

				<section class="row section">
					<div class="row-content buffer even clear-after">	
						<div class="column six">
							<h2>Mobile App</h2>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
							<p><em>- Courtesy of <a href="#sok" target="_blank">Simeon K.</a>.</em></p>
							<a class="button transparent aqua" href="#">Explore</a>
						</div>
						<div class="side-mockup right-mockup animation">
							<div class="slider ipad-slider grey" data-autoplay="false">
								<figure>
									<div><img src="http://placehold.it/1008x756/ddd/fff&text=Beetle%20image" alt=""></div>
								</figure>
							</div>
						</div>
					</div>	
				</section>	

				<section class="row section">
					<div class="row-content buffer even clear-after">	
						<div class="column six push-six last-special">
							<h2>Landing page</h2>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
							<p><em>- Courtesy of <a href="#sok" target="_blank">Simeon K.</a>.</em></p>
							<a class="button transparent aqua" href="#">Explore</a>
						</div>							
						<div class="side-mockup left-mockup animation">
							<div class="slider desktop-slider" data-autoplay="3000">
								<figure>
									<div><img src="http://placehold.it/1148x630/ddd/fff&text=Beetle%20image" alt=""></div>
									<div><img src="http://placehold.it/1148x630/ddd/fff&text=Beetle%20image" alt=""></div>
								</figure>
							</div>
						</div>					
					</div>	
				</section>					

				<section class="row section text-light" style="background-color:#4FCEAD;">
					<div class="row-content buffer even clear-after">
						<div class="slogan animation">
							<h2>This is an awesome heading slogan!</h2>	
							<p>Here you can type a subtitle.</p>						
						</div><!-- slogan -->				
					</div>
				</section>	

				<section class="row section">
					<div class="row-content buffer even clear-after">					
						<div class="slider iphone-slider grey" data-autoplay="3000">
							<figure>
								<div><img src="http://placehold.it/640x1136/ddd/fff&text=Beetle%20image" alt=""></div>
								<div><img src="http://placehold.it/640x1136/ddd/fff&text=Beetle%20image" alt=""></div>
								<div><img src="http://placehold.it/640x1136/ddd/fff&text=Beetle%20image" alt=""></div>
								<div><img src="http://placehold.it/640x1136/ddd/fff&text=Beetle%20image" alt=""></div>
								<div><img src="http://placehold.it/640x1136/ddd/fff&text=Beetle%20image" alt=""></div>
								<div><img src="http://placehold.it/640x1136/ddd/fff&text=Beetle%20image" alt=""></div>
							</figure>
						</div>
					</div>	
				</section>	

				<section class="row section text-light" style="background-color:#4FC1E9;">
					<div class="row-content buffer even clear-after">
						<div class="section-title"><h3>Testimonials</h3></div>
						<div class="testimonial-slider" data-autoplay="5000" data-pagination="true" data-transition="fade" data-autoheight="false">
							<div class="quote">
								<div class="column two">
									<figure class="testimonial-img">
										<img src="http://placehold.it/600x600/ddd/fff&text=Beetle%20image" alt="">
									</figure>
								</div><!-- column -->
								<div class="column ten last">
									<p>"It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout."</p>
									<div class="author">John Lennon</div>
								</div><!-- column -->
							</div><!-- quote -->
							<div class="quote">
								<div class="column two">
									<figure class="testimonial-img">
										<img src="http://placehold.it/600x600/ddd/fff&text=Beetle%20image" alt="">
									</figure>
								</div><!-- column -->
								<div class="column ten last">								
									<p>"Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy."</p>
									<div class="author">Fabrizio De Andr&egrave;</div>
								</div><!-- column -->
							</div><!-- quote -->		
							<div class="quote">
								<div class="column two">
									<figure class="testimonial-img">
										<img src="http://placehold.it/600x600/ddd/fff&text=Beetle%20image" alt="">
									</figure>
								</div><!-- column -->
								<div class="column ten last">									
									<p>"There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour."</p>
									<div class="author">B.B. King</div>
								</div><!-- column -->									
							</div><!-- quote -->							
						</div><!-- testimonial-slider -->				
					</div>
				</section>
				
				<section class="row section call-to-action">
					<div class="row-content buffer even animation">
						<p>Have you fallen in love with Beetle?</p>
						<a class="button red" href="#">Buy it now!</a>
					</div>
				</section>				

			</div><!-- id-main -->
		</main><!-- main -->

		<footer role="contentinfo">
			<div class="row">
				<div class="row-content buffer clear-after">
					<section id="top-footer">
						<div class="widget column three"><!-- la class="widget" è forse generata utomaticamente da wp -->
							<h4>Menu</h4>
							<ul class="plain">
								<li><a href="home-01.html">Home</a></li>
								<li><a href="works-3-columns.html">Portfolio</a></li>
								<li><a href="blog-4-columns-masonry.html">Blog</a></li>
								<li><a href="resume.html">Resume</a></li>
								<li><a href="file:///Users/pasqualevitiello/My%20Folder/Job/Envato/PR%20Themeforest/Flattie/Markup/Beetle/contact.html">Contact</a></li>
							</ul>
						</div>
						<div class="widget column three">
							<h4>Archives</h4>
							<ul class="plain">
								<li><a href="#">March 2014</a></li>
								<li><a href="#">April 2014</a></li>
								<li><a href="#">May 2014</a></li>
								<li><a href="#">June 2014</a></li>
								<li><a href="#">July 2014</a></li>
							</ul>
						</div>								
						<div class="widget column three">
							<h4>Widget</h4>
							<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
						</div>				
						<div class="widget meta-social column three">
							<h4>Follow Us</h4>
							<ul class="inline">
								<li><a href="#" class="twitter-share border-box"><i class="fa fa-twitter fa-lg"></i></a></li>
								<li><a href="#" class="facebook-share border-box"><i class="fa fa-facebook fa-lg"></i></a></li>
								<li><a href="#" class="pinterest-share border-box"><i class="fa fa-pinterest fa-lg"></i></a></li>
							</ul>
						</div>														
					</section><!-- top-footer -->
					<section id="bottom-footer">
						<p class="keep-left">&copy; 2014 Mokaine. All Rights Reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
						<p class="keep-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.</p>
					</section><!-- bottom-footer -->			
				</div><!-- row-content -->	
			</div><!-- row -->	
		</footer>

		<script src="https://code.jquery.com/jquery.js"></script>
		<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>		
		<script src="js/plugins.js"></script>
		<script src="js/beetle.js"></script>

	</body>

</html>
